import QtQuick 2.0
import QtQuick.Controls 1.1

Rectangle {
    id:chatBoard

    signal chatMessage(var msg)

    function clearBoard(){
        chatArea.text=""
    }
    function addMessage(msg){
        chatArea.append(msg)
    }

    color:"brown"
    state:"minimum"
    z:100
    anchors{
        left:parent.left
        right:parent.right
        bottom:parent.bottom
        margins:4
    }
    Text{
        id:lbl
        text:"click here"
        color:"white"
        font.pointSize: 12
        font.italic: true
        horizontalAlignment: Text.AlignHCenter
        anchors{
            left:parent.left
            right:parent.right
            top:parent.top
        }
        MouseArea{
            anchors.fill: parent
            onClicked: chatBoard.state=(chatBoard.state==="minimum" ? "enlarged" : "minimum")
        }
    }
    Item{
        anchors{
            top:lbl.bottom
            left:parent.left
            right:parent.right
            bottom:parent.bottom
            margins: 4
        }
        clip:true
        TextArea{
            id:chatArea
            height:lbl.height*7
            anchors{
//                top:parent.top
                left:parent.left
                right:parent.right
                bottom:chatInput.top
            }
            activeFocusOnPress: false
            activeFocusOnTab: false
            textFormat: TextEdit.RichText
//            wrapMode: TextEdit.Wrap
        }
        TextField{
            id:chatInput
            height: lbl.height
            anchors{
                bottom:parent.bottom
                left:parent.left
                right: parent.right
            }
            text:""
            onAccepted:{
                if(text!=""){
                    chatBoard.chatMessage(text)
                    text=""
                }
            }
        }
    }
    states: [
        State {
            name: "minimum"
            PropertyChanges {
                target: chatBoard
                height: lbl.height
            }
            PropertyChanges {
                target: lbl
                text: qsTr("Click here to show chat board")
            }
        },
        State {
            name: "enlarged"
            PropertyChanges {
                target: chatBoard
                height: lbl.height*9
            }
            PropertyChanges {
                target: lbl
                text: qsTr("Click here to hide chat board")
            }
            onCompleted: chatInput.forceActiveFocus()
        }
    ]
    transitions: [
        Transition {
            from: "minimum"
            to: "enlarged"
            NumberAnimation { target: chatBoard; property: "height"; duration: 500; easing.type: Easing.InOutQuad }
        },
        Transition {
            from: "enlarged"
            to: "minimum"
            NumberAnimation { target: chatBoard; property: "height"; duration: 500; easing.type: Easing.InOutQuad }
        }
    ]
//    Component.onCompleted: {
//        addMessage("first")
//        addMessage("second")
//        console.log(chatArea.text)
//    }
}




